<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <!--<li>
                            用户唯一检验标识：<input type="text" name="token"/>
                        </li>-->

                            <li :10px>
                                会员昵称：<input type="text" name="userNick"/>
                            </li>

                            <!--	<li>
                                    用户头像：<input type="text" name="userHead"/>
                                </li>-->
<!--
                            <li>
                                手机号：<input type="text" name="userPhone"/>
                            </li>-->

                        <!--	<li>
                                用户密码：<input type="text" name="userPw"/>
                            </li>-->

                        <!--	<li>
                                等级：<input type="text" name="levelId"/>
                            </li>-->

                        <!--		<li>
                                    注册时间：<input type="text" name="createTime"/>
                                </li>-->

                            <li>
                                 用户姓名：<input type="text" name="userName"/>
                             </li>


                         <!--   <li>
                                &lt;!&ndash;  性别：<input type="text" name="userSex"/>&ndash;&gt;
                                <label class="col-sm-2 control-label">性别:</label>
                                <div class="col-sm-2">
                                    <select class="form-control" name="userSex">
                                        <option selected="selected" disabled="disabled" style='display: none'
                                                value=''></option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                            </li>-->

                            <li>
                                <!--  身份认证状态：<input type="text" name="cardState"/>-->
                                <label class="col-sm-4 control-label"> 身份认证状态:</label>
                                <div class="col-sm-2">
                                    <select class="form-control" name="cardState" onchange="$.table.search()">
                                        <option selected="selected" label="所有"
                                                value=''></option>
                                        <option value="0">未认证</option>
                                        <option value="1">已认证</option>
                                    </select>
                                </div>
                                <!--身份认证状态:
                                <select class="form-control" name="cardState" onchange="$.table.search()">
                                    <option selected="selected" label="所有"
                                            value=''></option>
                                    <option value="0">未认证</option>
                                    <option value="1">已认证</option>
                                </select>-->
                            </li>

                            <!--<li>
                                身份证号：<input type="text" name="userCard"/>
                            </li>-->

                            <!--	<li>
                                    身份证正面照片：<input type="text" name="cardTimg"/>
                                </li>

                                <li>
                                    身份证反面照片：<input type="text" name="cardFimg"/>
                                </li>-->

                            <!--	<li>
                                    身份认证时间：<input type="text" name="cardTime"/>
                                </li>-->

                        <!--    <li>
                                &lt;!&ndash; 注册审核状态：<input type="text" name="checkState"/>&ndash;&gt;
                                <label class="col-sm-4  control-label"> 注册审核状态:</label>
                                <div class="col-sm-2">
                                    <select class="form-control" name="checkState">
                                        <option selected="selected" disabled="disabled" style='display: none'
                                                value=''></option>
                                        <option value="0">未审核</option>
                                        <option value="1">通过</option>
                                        <option value="2">未通过</option>
                                    </select>
                                </div>

                            </li>-->

                            <!--	<li>
                                    身份认证审核人：<input type="text" name="checkAdmin"/>
                                </li>-->

                            <!--	<li>
                                    身份认证审核时间：<input type="text" name="checkDate"/>
                                </li>
    -->
                            <li>
                                <!-- 宠物状态：<input type="text" name="petState"/>-->
                                <label class="col-sm-3 control-label"> 宠物状态:</label>
                                <div class="col-sm-2">
                                    <select class="form-control" name="petState" onchange="$.table.search()">
                                        <option selected="selected" label="所有"
                                                value=''></option>
                                        <option value="0">未绑定</option>
                                        <option value="1">已有绑定</option>

                                    </select>
                                </div>
                            </li>

                        <li class="select-time">
                            <label >选择注册时间范围：</label>
                            <select  name="time" id="time" onchange="$.table.search()" >
                                <option value="0"  ></option>
                                <option value="1" >今日</option>
                                <option value="2" >昨日 </option>
                                <option value="3" >过去七天</option>
                                <option value="4" >过去30天</option>
                            </select>
                        </li>
                        <li class="select-time">
                            <label>注册时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
                        </li>
                            <!--	<li>
                                    宠物创建时间：<input type="text" name="petTime"/>
                                </li>-->
                        <!--    <li>
                                保证金余额：<input type="text" name="freeTotal"/>
                            </li>

                            <li>
                                消费余额：<input type="text" name="yTotal"/>
                            </li>-->

                        <!--	<li>
                                保证金缴纳时间：<input type="text" name="bailTime"/>
                            </li>
                        	<li>
                                是否有优惠券：<input type="text" name="isYhq"/>
                            </li>

                            <li>
                                是否有红包：<input type="text" name="isHb"/>
                            </li>

                            <li>
                                是否有时长卡：<input type="text" name="isKj"/>
                            </li>

                            <li>
                                删除标记：<input type="text" name="delFlag"/>
                            </li>-->

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm hidden-xs" id="toolbar" role="group">

                <a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="gxgw_modules:vipUsers:edit">
                    <i class="fa fa-edit"></i> 审核
                </a>
            <a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="gxgw_modules:vipUsers:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()"
               shiro:hasPermission="gxgw_modules:vipUsers:export">
                <i class="fa fa-download"></i> 导出
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
        <div class="col-sm-12 search-collapse" style="width: 100%; height: 100%;">
            <form id="chartType" style="overflow: hidden;">
                <div class="select-list">
                    <ul>
                        <li>
                            按
                            <input class="typeRadio" type="radio" name="type" value="year" checked="true" />年
                            <input class="typeRadio" type="radio" name="type" value="season" />季度
                            <input class="typeRadio" type="radio" name="type" value="month" />月
                            查询
                        </li>
                        <li class="yearLi">
                            <label class="control-label">选择时间：</label>
                            <input type="text" class="chart-year" id="chartYear" name="chartYear" style="display: inline-block;"/>
                        </li>
                        <li class="monthLi" style="display: none;">
                            <label class="control-label">选择时间：</label>
                            <input type="text" class="chart-month" id="chartMonth" name="chartMonth" style="display: inline-block;"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="searchChart()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
            <div id="myChart" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('gxgw_modules:vipUsers:edit')}]];
    var removeFlag = [[${@permission.hasPermi('gxgw_modules:vipUsers:remove')}]];
    var prefix = ctx + "gxgw_modules/vipUsers";
    var myChart = echarts.init(document.getElementById('myChart'));
    var chartOpt = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return params[0].name + ": " + params[0].value;
            }
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value',
            name: "人数/人",
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '用户注册统计',
            type: 'line',
            data: []
        }]
    }

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "会员用户",
            search: false,
            showExport: true,
            columns: [{
                checkbox: true
            },
                {
                    field: 'userId',
                    title: '会员序号',
                    visible: true
                },
                /*{
                    field : 'token',
                    title : '用户唯一检验标识',
                    sortable: true
                },*/
                {
                    field: 'userNick',
                    title: '会员昵称',
                    sortable: true
                },
                {
                    field: 'userHead',
                    title: '用户头像',
                    sortable: true
                },
                {
                    field: 'userPhone',
                    title: '手机号',
                    sortable: true
                },
                {
                    field: 'levelName',
                    title: '等级',
                    sortable: true
                },
                {
                    field: 'createTime',
                    title: '注册时间',
                    sortable: true
                },
                {
                    field: 'userName',
                    title: '用户姓名',
                    sortable: true
                },
                {
                    field: 'userPw',
                    title: '密码',
                    sortable: true
                },
                {
                    field: 'userSex',
                    title: '性别',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 1:
                                return '男'
                            case 2:
                                return '女'
                            default:
                                return '未知状态'
                        }
                    }
                },
                {
                    field: 'cardState',
                    title: '身份认证状态',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '未认证'
                            case 1:
                                return '已认证'
                            default:
                                return '未知状态'
                        }
                    }
                },
                {
                    field: 'userCard',
                    title: '身份证号',
                    sortable: true
                },
                {
                    field: 'cardTimg',
                    title: '身份证正面照片',
                    sortable: true
                },
                {
                    field: 'cardFimg',
                    title: '身份证反面照片',
                    sortable: true
                },
                {
                    field: 'cardTime',
                    title: '身份认证时间',
                    sortable: true
                },
                {
                    field: 'checkState',
                    title: '注册审核',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '未审核'
                            case 1:
                                return '审核通过'
                            case 2:
                                return '未通过'
                            default:
                                return '未知状态'
                        }
                    }
                },
                {
                    field: 'user.userName',
                    title: '身份认证审核人',
                    sortable: true
                },
                {
                    field: 'checkDate',
                    title: '身份认证审核时间',
                    sortable: true
                },
                {
                    field: 'petState',
                    title: '宠物状态',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '未绑定'
                            case 1:
                                return '已绑定'
                            default:
                                return '未知状态'
                        }
                    }
                },
                {
                    field: 'petTime',
                    title: '宠物创建时间',
                    sortable: true
                },
                {
                    field: 'pcheckState',
                    title: '宠物认证审核状态',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '未审核'
                            case 1:
                                return '审核通过'
                            case 2:
                                return '审核未通过'
                            default:
                                return '未知状态'
                        }
                    }

                },
                {
                    field: 'bailState',
                    title: '保证金缴纳状态',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '未缴纳'
                            case 1:
                                return '已缴纳'
                            case 2:
                                return '保证金不足'
                            default:
                                return '未知状态'
                        }
                    }
                },
                {
                    field: 'freeTotal',
                    title: '保证金余额',
                    sortable: true
                },
                {
                    field: 'yTotal',
                    title: '消费余额',
                    sortable: true
                },
                {
                    field: 'bailTime',
                    title: '保证金缴纳时间',
                    sortable: true
                },
                {
                    field: 'isYhq',
                    title: '是否有优惠券',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '无'
                            case 1:
                                return '有'
                            default:
                                return '未知状态'
                        }
                    }
                },
                {
                    field: 'isHb',
                    title: '是否有红包',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '无'
                            case 1:
                                return '有'
                            default:
                                return '未知状态'
                        }
                    }

                },
                {
                    field: 'isKj',
                    title: '是否有时长卡',
                    sortable: true,
                    formatter: function (value) {
                        switch (value) {
                            case 0:
                                return '无'
                            case 1:
                                return '有'
                            default:
                                return '未知状态'
                        }
                    }
                },
                /*  {
                      field: 'delFlag',
                      title: '删除标记',
                      sortable: true
                  },*/
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>审核</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        $('.typeRadio').change(function () {
            var value = $("input[name='type']:checked").val();
            if(value === 'year' || value === 'season'){
                $('.monthLi').css('display', 'none');
                $('.yearLi').css('display', 'block');
            } else if(value === 'month'){
                $('.yearLi').css('display', 'none');
                $('.monthLi').css('display', 'block');
            }
        })
    });
    
    var searchChart = function () {
        var value = $("input[name='type']:checked").val();
        if(value === 'year'){
            getChartByYear();
        } else if(value === 'season'){
            getChartBySeason();
        } else if(value === 'month'){
            getChartByMonth();
        }
    }
    
    var getChartByYear = function () {
        var year = $('#chartYear').val();
        $.get(prefix+'/getChartByYear?year='+year, function (data) {
            var xaxis = [];
            var yaxis = [];
            for(var i=0; i<data.length; i++){
              xaxis.push(data[i].showTime);
              yaxis.push(data[i].num);
            }
            chartOpt.xAxis.name = "月份";
            chartOpt.xAxis.data = xaxis;
            chartOpt.series[0].data = yaxis;
            myChart.setOption(chartOpt);
        });

    };
    var getChartBySeason = function () {
        var year = $('#chartYear').val();
        $.get(prefix+'/getChartBySeason?year='+year, function (data) {
            console.log(data)
            var xaxis = [];
            var yaxis = [];
            for(var i=0; i<data.length; i++){
                xaxis.push("第"+data[i].showTime+"季度");
                yaxis.push(data[i].num);
            }
            chartOpt.xAxis.name = "季度";
            chartOpt.xAxis.data = xaxis;
            chartOpt.series[0].data = yaxis;
            myChart.setOption(chartOpt);
        });

    }
    var getChartByMonth = function () {
        var value = $('#chartMonth').val();
        var year = value.split('-')[0];
        var month = parseInt(value.split('-')[1]);
        $.get(prefix+'/getChartByMonth?year='+year+'&month='+month, function (data) {
            console.log(data)
            var xaxis = [];
            var yaxis = [];
            for(var i=0; i<data.length; i++){
                xaxis.push(data[i].showTime);
                yaxis.push(data[i].num);
            }
            chartOpt.xAxis.name = "日期";
            chartOpt.xAxis.data = xaxis;
            chartOpt.series[0].data = yaxis;
            myChart.setOption(chartOpt);
        });

    };

</script>
</body>
</html>